//百度地图

import React, {Component} from 'react';
import {Input, Button,Row, Col} from 'antd';
// import BMap from 'BMap'
import app from '../app';


class Maps extends Component{
    constructor(props){
        super(props);
        this.state = {
            BMap: window.BMap,
            changePoint:{},
        }
    }



    render(){

        return (

                <div>
                    <Row style={{marginBottom:'20px'}}>
                        <Col offset={2} span={6}>
                            <Input type="text" placeholder="请输入搜索地址(按回车键搜索)" onPressEnter={(e) => this.onSearch(e)}/>
                        </Col>
                    </Row>



                    <div id="allmap" style={{width:'1000px',height:'500px',margin:'0 auto'}} >

                    </div>

                </div>

        )
    }

    componentDidUpdate() {
        setTimeout(() => {
            const BMap = this.state.BMap;
            let map = this.state.map;
            let changePoint = this.props.data;
            let longitude = changePoint.lng;
            let latitude =changePoint.lat;
            if (!longitude || longitude === '' || !latitude || latitude === '') {
                longitude = '113.128438';
                latitude = '23.016184';
            }
            //设置地图中心点
            let point = new BMap.Point(longitude, latitude);
            let myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png",
                new BMap.Size(23, 25), {
                    offset: new BMap.Size(10, 25),
                    imageOffset: new BMap.Size(0, 0 - 11 * 25)
                });
            let marker = new BMap.Marker(point, {icon: myIcon});
            map.clearOverlays();
            map.addOverlay(marker);
            map.panTo(point);
        }, 300);
    }

    componentDidMount(){
        const BMap = this.state.BMap;
        var map = new BMap.Map("allmap");
        this.setState({map});
        this.setMap(map);
        let _this = this;
        map.addEventListener("click",function(e){
            //  console.log(e.point.lng + "," + e.point.lat);
            let myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png",
            new BMap.Size(23, 25), {
                offset: new BMap.Size(10, 25),
                imageOffset: new BMap.Size(0, 0 - 11 * 25)
            });
            let point = new BMap.Point(e.point.lng, e.point.lat);
            let changePoint = {};
            changePoint.x = e.point.lng;
            changePoint.y = e.point.lat;
            _this.setState({changePoint});
            let marker = new BMap.Marker(point, {icon: myIcon});
            map.clearOverlays();
            map.addOverlay(marker);
            let data = e.point;
            _this.props.getPoint(data);
        });
    }

    //设置地图初始值
    setMap(map){
        const BMap = this.state.BMap;
        let site_x = this.props.data.site_x;
        let site_y = this.props.data.site_y;
        map.centerAndZoom(new BMap.Point(site_x, site_y), 20); // 初始化地图,设置中心点坐标和地图级别

        let myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png",
            new BMap.Size(23, 25), {
                offset: new BMap.Size(10, 25),
                imageOffset: new BMap.Size(0, 0 - 11 * 25)
            });
        let point = new BMap.Point(site_x, site_y);
        let marker = new BMap.Marker(point, {icon: myIcon});
        map.addOverlay(marker);

        map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
        map.setCurrentCity("广东"); // 设置地图显示的城市 此项是必须设置的
        map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
    }

    //搜索地址
    onSearch(e){
        const BMap = this.state.BMap;
        const map = this.state.map;
        let value = e.target.value;
        var local = new BMap.LocalSearch(map, {
            renderOptions: {map: map}
        });
        local.search(value);
    }
}

export default Maps;